<template>
  <div class="user">
    <div class="user-left">
      <div class="user-left-top">
        <div class="user-left-top-item">
          <p>平台单位总数</p>
          <div class="item-num">
            <img src="@/assets/img/census/icon_hose.png" alt="" />
            <p v-if="unitData" style="color: #4c68ff">{{ unitData.count }}</p>
          </div>
        </div>
      </div>
      <div class="user-left-bottom">
        <div class="user-left-bottom-title">
          <img src="@/assets/img/census/icon_user.png" alt="" />
          <p v-if="userData">
            <span>{{ userData.count }}</span
            ><span>平台用户总数分布</span>
          </p>
        </div>
        <div class="user-left-bottom-ratio">
          <p :style="widthList[0]"></p>
          <p :style="widthList[1]"></p>
          <p :style="widthList[2]"></p>
        </div>
        <div class="user-left-bottom-list">
          <div class="user-left-bottom-list-item" v-for="(item, index) in userCensusList" :key="index">
            <p :style="item.color"></p>
            <div class="user-left-bottom-list-item-con">
              <p style="color: #fff; opacity: 0.7">{{ item.name }}</p>
              <p>{{ item.num }}</p>
              <p style="color: #fff; opacity: 0.7">{{ item.ratio }}%</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="user-right">
      <div id="chart"></div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {onMounted, ref} from 'vue';
import {EChartsOption, init} from 'echarts';
import censusApi from '@/api/census.ts';

const widthList = ref([]);

const userData = ref();
const unitData = ref();
const chartUser = ref([]);
const chartUnit = ref([]);
const monthList = ref([]);

const userCensusList = ref([
  {
    name: '普通用户',
    num: 0,
    ratio: 0,
    color: 'border-color:#00FF9C',
  },
  {
    name: '单位管理员',
    num: 0,
    ratio: 0,
    color: 'border-color:#0094FF',
  },
  {
    name: '超级管理员',
    num: 0,
    ratio: 0,
    color: 'border-color:#00E0FF',
  },
]);

const getUserRank = async () => {
  const res = await censusApi.userRank();
  userData.value = res.data.user;
  unitData.value = res.data.unit;
  userData.value.stat.forEach((item) => {
    chartUser.value.push(item.count);
    monthList.value.push(item.month);
  });
  unitData.value.stat.forEach((item) => {
    chartUnit.value.push(item.count);
  });
  userCensusList.value[0].num = userData.value.role_count['普通用户'];
  userCensusList.value[0].ratio = ((userData.value.role_count['普通用户'] / userData.value.count) * 100).toFixed(2);
  widthList.value.push(`width:${userCensusList.value[0].ratio}%`);
  userCensusList.value[1].num = userData.value.role_count['单位管理员'];
  userCensusList.value[1].ratio = ((userData.value.role_count['单位管理员'] / userData.value.count) * 100).toFixed(2);
  widthList.value.push(`width:${userCensusList.value[1].ratio}%`);
  userCensusList.value[2].num = userData.value.role_count['超级管理员'];
  userCensusList.value[2].ratio = ((userData.value.role_count['超级管理员'] / userData.value.count) * 100).toFixed(2);
  widthList.value.push(`width:${userCensusList.value[2].ratio}%`);
};

const initChart = async () => {
  await getUserRank();
  const chartDom = document.getElementById('chart') as HTMLElement;
  const chartChart = init(chartDom);
  const chartOption: EChartsOption = {
    title: {
      text: '月度单位数/月度用户数',
      textStyle: {
        color: '#fff',
        fontSize: 18,
      },
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: [{name: '用户'}, {name: '单位'}],
      left: 'right',
      textStyle: {
        color: '#fff',
        fontSize: 12,
      },
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      axisTick: {
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#444D83',
          width: 2,
        },
      },
      axisLabel: {
        textStyle: {
          // 改变xy轴上文字的颜色
          color: '#D5E1FF',
        },
      },
      splitLine: {
        show: false,
      },

      data: monthList.value,
    },
    yAxis: {
      type: 'value',
      boundaryGap: false,
      axisLine: {
        show: true,
        lineStyle: {
          color: '#444D83',
          width: 2,
        },
      },
      axisLabel: {
        textStyle: {
          // 改变xy轴上文字的颜色
          color: '#7D87B8',
        },
      },
      splitLine: {
        show: false,
      },
    },

    series: [
      {
        name: '用户',
        type: 'line',
        itemStyle: {
          color: '#0883FF',
          lineStyle: {
            color: '#0883FF',
          },
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              // 渐变颜色
              {
                offset: 0,
                color: '#0883FF',
              },
              {
                offset: 1,
                color: 'transparent',
              },
            ],
            global: false,
          },
        },

        data: chartUser.value,
      },
      {
        name: '单位',
        type: 'line',
        itemStyle: {
          color: '#2CF2F3',
          lineStyle: {
            color: '#2CF2F3',
          },
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              // 渐变颜色
              {
                offset: 0,
                color: '#2CF2F3',
              },
              {
                offset: 1,
                color: 'transparent',
              },
            ],
            global: false,
          },
        },

        data: chartUnit.value,
      },
    ],
  };
  document.getElementById('chart').setAttribute('_echarts_instance_', '');
  chartOption && chartChart.setOption(chartOption);
};

onMounted(() => {
  initChart();
});
</script>
<style lang="scss" scoped>
.user {
  padding: 40px 40px 0 54px;
  color: #fff;
  display: flex;
  justify-content: space-between;
  p {
    margin: 0;
  }
  &-left {
    &-top {
      display: flex;
      &-item {
        width: 100%;
        height: 105px;
        background: #0f1c52;
        border-radius: 3px;
        padding: 20px;
        box-sizing: border-box;
        > p {
          font-weight: bold;
          font-size: 16px;
        }
        .item-num {
          display: flex;
          margin-top: 13px;
          > img {
            width: 35px;
            height: 35px;
          }
          > p {
            margin-left: 10px;
            font-weight: bold;
            font-size: 32px;
          }
        }
      }
    }
    &-bottom {
      width: 369px;
      height: 211px;
      margin-top: 15px;
      background: #0f1c52;
      border-radius: 3px;
      padding: 22px 21px 0 15px;
      box-sizing: border-box;
      &-title {
        display: flex;
        > img {
          width: 40px;
          height: 40px;
        }
        > p {
          flex: 1;
          display: flex;
          justify-content: space-between;
          padding-left: 20px;
          font-weight: bold;
          > span:nth-of-type(1) {
            font-size: 32px;
          }
          > span:nth-of-type(2) {
            font-size: 16px;
            margin-top: 10px;
          }
        }
      }
      &-ratio {
        display: flex;
        align-items: center;
        margin-top: 16px;
        > p:nth-of-type(1) {
          border-bottom: 8px solid #00ff9c;
          border-right: 8px solid transparent;
        }
        > p:nth-of-type(2) {
          height: 8px;
          background: #0094ff;
          transform: skewX(45deg);
          margin: 0 8px;
        }
        > p:nth-of-type(3) {
          border-top: 8px solid #00e0ff;
          border-left: 8px solid transparent;
        }
      }
      &-list {
        margin-top: 20px;
        &-item {
          margin-bottom: 8px;
          display: flex;
          align-items: center;
          > p {
            width: 10px;
            height: 10px;
            border: 3px solid;
            border-radius: 50%;
          }
          &-con {
            margin-left: 11px;
            flex: 1;
            display: flex;
            justify-content: space-between;
            > p:nth-of-type(1) {
              width: 100px;
            }
            > p:nth-of-type(3) {
              width: 50px;
              text-align: right;
            }
          }
        }
      }
    }
  }
  &-right {
    margin-left: 100px;
    #chart {
      width: 700px;
      height: 300px;
      z-index: 999;
    }
  }
}
</style>
